<template>
	<view class="container-bottom-btns">
		<view class="form">
			<view class="form-column-item">
				<view class="label">出租类别</view>
				<view class="picker-content" @tap="$refs.productType.open()">
					<view :class="{'placeholder-picker': !form.productType, 'picker-text': form.productType}">
						{{form.productType ? productTypeStr : '请选择出租类别'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">分类</view>
				<uni-data-picker  ref="category" :localdata="categoryList" popup-title="请选择分类" @change="onchange"
					v-model="form.categoryId" @nodeclick="onnodeclick" ></uni-data-picker>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">设备品牌</view>
				<view class="content">
					<input type="text" placeholder="请输入品牌" v-model="form.hgProductEquipmentLease.equipmentBrand"/>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">设备型号</view>
				<view class="content">
					<input type="text" placeholder="请输入型号" v-model="form.hgProductEquipmentLease.equipmentNo" />
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">出厂日期</view>
				<view class="picker-content" @tap="showFactoryDate = true">
					<view :class="{'placeholder-picker': !form.hgProductEquipmentLease.factoryDate, 'picker-text': form.hgProductEquipmentLease.factoryDate}">
						{{form.hgProductEquipmentLease.factoryDate ? form.hgProductEquipmentLease.factoryDate : '请选择出厂日期'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">工作小时</view>
				<view class="content">
					<input type="digit" v-model="form.hgProductEquipmentLease.workHours" placeholder="请输入工作小时" />
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">整机序列号</view>
				<view class="content">
					<input type="text" placeholder="请输入整机序列号" v-model="form.hgProductEquipmentLease.serialNo"/>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.buildStuff.value">
				<view class="label">日租金</view>
				<view class="content">
					<input type="digit" placeholder="请输入金额" v-model="form.hgProductMaterialLease.dayRent"/>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">月租金</view>
				<view class="content">
					<input type="digit" placeholder="请输入金额" v-model="form.hgProductEquipmentLease.monthRent"/>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.buildStuff.value">
				<view class="label">月租金</view>
				<view class="content">
					<input type="digit" placeholder="请输入金额" v-model="form.hgProductMaterialLease.monthRent"/>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.buildStuff.value">
				<view class="label">年租金</view>
				<view class="content">
					<input type="digit" placeholder="请输入金额" v-model="form.hgProductMaterialLease.yearRent"/>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">台班租金</view>
				<view class="content">
					<input type="digit" placeholder="请输入金额" v-model="form.hgProductEquipmentLease.classRent"/>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">小时租金</view>
				<view class="content">
					<input type="digit" placeholder="请输入金额" v-model="form.hgProductEquipmentLease.hourRent"/>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.buildStuff.value">
				<view class="label">数量</view>
				<view class="content">
					<input type="number" placeholder="请输入数量" v-model="form.hgProductMaterialLease.stock"/>
					<text class="store-unit">/个/节/米/吨</text>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.device.value">
				<view class="label">设备状态</view>
				<view class="picker-content" @tap="$refs.rentOutStatus.open()">
					<view :class="{'placeholder-picker': !form.hgProductEquipmentLease.leaseStatus, 'picker-text': form.hgProductEquipmentLease.leaseStatus}">
						{{form.hgProductEquipmentLease.leaseStatus ? rentOutStatusStr : '请选择设备状态'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item" v-if="form.productType === productType.buildStuff.value">
				<view class="label">设备状态</view>
				<view class="picker-content" @tap="$refs.rentOutStatus.open()">
					<view :class="{'placeholder-picker': !form.hgProductMaterialLease.leaseStatus, 'picker-text': form.hgProductMaterialLease.leaseStatus}">
						{{form.hgProductMaterialLease.leaseStatus ? rentOutStatusStr2 : '请选择设备状态'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">商品标题</view>
				<view class="content">
					<input type="text" v-model="form.productTitle" placeholder="请输入商品标题" />
				</view>
			</view>
			<view class="" v-if="productAttr.length">
				<view class="form-column-item" style="border:0;">
					<view class="label">商品参数(根据类别进行填写)</view>
				</view>
				<view class="form-column-item" v-for="(item,index) in productAttr" style="border-bottom: 1rpx solid #EBEBEB;">
					<view class="label" style="font-size: 28rpx;">{{item.title}}</view>
					<view class="content">
						<input v-model="item.value" type="text" :placeholder="'请输入' + item.title" />
					</view>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">商品图片</view>
				<view class="content">
					<UploadImages :limit="6" v-model="productImgList"></UploadImages>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">商品详情</view>
				<view class="content">
					<UploadImages :limit="6" v-model="productDetailImgList"></UploadImages>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">联系人</view>
				<view class="content">
					<input type="text" v-model="form.addressName" placeholder="请输入联系人" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">联系方式</view>
				<view class="content">
					<input type="tel" v-model="form.addressPhone" maxlength="11" placeholder="请输入联系方式" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">位置信息</view>
				<view class="picker-content" @tap="$refs.region.open()">
					<view :class="{'placeholder-picker': !regionStr, 'picker-text': regionStr}">
						{{regionStr ? regionStr : '请选择位置信息'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="bottom-btn-wrapper">
			<SubmitBtn :text="!productId ? '立即发布' : '编辑'" @tap="submit"></SubmitBtn>
		</view>


		<OnePicker ref="productType" keyName="label" :columns="[productTypeArr]" @pickerConfirm="productTypeConfirm" :defaultIndex="[productTypeIndex]"></OnePicker>
		<OnePicker ref="rentOutStatus" keyName="label" :defaultIndex="[leaseStatusIndex]" :columns="[rentOutStatusArr]" @pickerConfirm="rentOutStatusConfirm"></OnePicker>
		<u-datetime-picker v-model="factoryDate" :show="showFactoryDate"  mode="date" confirmColor="#FE5A13" @confirm="factoryDateConfirm" @cancel="showFactoryDate = false"></u-datetime-picker>
		<RegionPicker ref="region" @regionConfirm="regionConfirm"></RegionPicker>
		
	</view>
</template>

<script>
	import {
		productType,
		rentOutStatus,
		const2Arr,
		deviceStatus
	} from '@/consts/index.js'
	import UploadImages from '@/components/UploadImages/UploadImages.vue'
	import { getCategory, cateProductParam, addProduct, getProductDetail, editProduct } from '@/api/product.js'
	import { toast } from '@/utils/uni-api.js'
	import validate from '@/utils/validate.js'
	export default {
		components:{
			UploadImages
		},
		data() {
			return {
				productType,
				rentOutStatus,
				productTypeArr: const2Arr(productType),
				rentOutStatusArr: const2Arr(rentOutStatus),
				categoryList:[],
				productId: '',
				factoryDate: '',
				form: {
					productType: productType.device.value, // 1设备 2建材
					putType: 3,  // 1厂家 2二手 3租赁
					categoryId: '',   // 分类ID
					productTitle: '', // 商品标题
					productImg: '',   // 商品图片
					intro: '', // 商品详情图片
					addressName: '',  // 联系人
					addressPhone: '', //联系方式
					provinceId: '',   // 省级ID
					province: '',
					cityId: '',       // 市级ID
					city: '',
					areaId: '',       // 地区ID
					area: '',
					productAttr: [],  // 商品参数
					showPrice: '',   // 展示价格 等同于售价
					address: '',  // 地址详情 暂时没用
					// 出售设备
					hgProductEquipmentSell:{  
						equipmentBrand: '', //设备品牌
						equipmentNo: '', // 设备型号
						serialNo: '',  // 整机序列号
						factoryDate: '', //出厂日期
						workHours: '',  // 工作小时
						price: '', // 售价
						paymentWay: '',  //付款方式
						equipmentStatus: '', // 设备状态
					}, 
					// 出售建材
					hgProductMaterialSell:{  
						stock: '',
						price: ''
					},
					// 租赁设备
					hgProductEquipmentLease:{
						equipmentBrand: '', // 设备品牌,
						equipmentNo: '',   // 设备型号
						serialNo: '',      // 整机序列号
						factoryDate: '',   //出厂日期
						workHours: '',     // 工作小时
						monthRent: '',     // 月租金
						classRent: '',    // 台班租金
						hourRent: ''       ,// 小时租金
						leaseStatus: '' // 租赁状态 1-待租 2-已租
					},
					// 租赁建材
					hgProductMaterialLease:{
						dayRent: '',    // 日租金
						monthRent: '',  // 月租金
						yearRent: '',   // 年租金
						stock: ''       ,// 数量
						leaseStatus: '' // 租赁状态 1-待租 2-已租
					},
					// 规格
					hgProductSkus: [], 	 
				},
				productAttr: [],
				productImgList: [], // 商品图片数组
				productDetailImgList: [], // 商品详情图片数据
				showFactoryDate: false, // 显示出厂日期Picker
				leaseStatusIndex: 0,
				productTypeIndex: 0
			}
		},
		onLoad(option){
			if(option.id){
				this.productId = option.id
				this.getProductDetail(option.id)
			}
			this.getCategory()
		},
		computed: {
			productTypeStr() {
				return this.productTypeArr.find(item => item.value === this.form.productType).label
			},
			rentOutStatusStr(){
				return this.form.hgProductEquipmentLease.leaseStatus ? this.rentOutStatusArr.find(item => item.value === this.form.hgProductEquipmentLease.leaseStatus).label : ''
			},
			rentOutStatusStr2(){
				return this.form.hgProductMaterialLease.leaseStatus ? this.rentOutStatusArr.find(item => item.value === this.form.hgProductMaterialLease.leaseStatus).label : ''
			},
			regionStr(){
				return this.form.provinceId ? `${this.form.province},${this.form.city},${this.form.area}` : ''
			}
			
		},
		methods: {
			getCategory(){
				getCategory().then(res => {
					this.categoryList = this.formatCategory(res.result);
				})
			},
			formatCategory(data){
				data.forEach(item => {
					item.text = item.categoryTitle
					item.value = item.id
					if(item.children){
						this.formatCategory(item.children)
					}
				})
				return data;
			},
			getProductDetail(id){
				getProductDetail({id}).then(res => {
					let data = res.result;
					this.form = {
						productType: data.product_type, 
						putType: data.put_type,  
						categoryId: data.category_id, 
						productTitle: data.product_title, // 商品标题
						productImg: '',   // 商品图片
						intro: '',        // 商品详情图片
						addressName: data.address_name,  // 联系人
						addressPhone: data.address_phone, //联系方式
						provinceId: data.province_id,   // 省级ID
						province: data.province,
						cityId: data.city_id,       // 市级ID
						city: data.city,
						areaId: data.area_id,       // 地区ID
						area: data.area,
						productAttr: [],  // 商品参数
						showPrice: '',   // 展示价格 等同于售价
						address: '',  // 地址详情 暂时没用
						phone: '',
						code: '',
						// 出售设备
						hgProductEquipmentSell:{  
							equipmentBrand: '',
							equipmentNo: '',
							serialNo: '',
							factoryDate: '',
							workHours: '',
							price: '',
							paymentWay: '',
							equipmentStatus: '',
							buyPrice: '',
							status: ''
						}, 
						// 出售建材
						hgProductMaterialSell:{  
							stock: '',
							price: '',
							paymentWay: '',
						},
						// 租赁设备
						hgProductEquipmentLease:{
							equipmentBrand: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.equipmentBrand : '',
							equipmentNo: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.equipmentNo : '',
							serialNo: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.serialNo : '',
							factoryDate: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.factoryDate : '',
							workHours: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.workHours : '',
							monthRent: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.monthRent : '',
							classRent: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.classRent : '',
							hourRent: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.hourRent : '',
							leaseStatus: data.hgProductEquipmentLease ? data.hgProductEquipmentLease.leaseStatus : '', // 租赁状态 1-待租 2-已租
						},
						// 租赁建材
						hgProductMaterialLease:{
							dayRent: data.hgProductMaterialLease ? data.hgProductMaterialLease.dayRent : '',
							monthRent: data.hgProductMaterialLease ? data.hgProductMaterialLease.monthRent : '',
							yearRent: data.hgProductMaterialLease ? data.hgProductMaterialLease.yearRent : '',
							stock: data.hgProductMaterialLease ? data.hgProductMaterialLease.stock : '',
							leaseStatus: data.hgProductMaterialLease ? data.hgProductMaterialLease.leaseStatus : '', // 租赁状态 1-待租 2-已租
						},
						hgProductSkus: []
						
					}
					this.productImgList = data.product_img.split(',')
					this.productDetailImgList = data.intro.split(',')
					this.factoryDate = this.form.hgProductEquipmentLease ? new Date(this.form.hgProductEquipmentLease.factoryDate) : ''
					//租赁建材
					if(data.hgProductMaterialLease){
						this.leaseStatusIndex = this.rentOutStatusArr.findIndex(item => item.value === data.hgProductMaterialLease.leaseStatus)
					}else{
						this.leaseStatusIndex = this.rentOutStatusArr.findIndex(item => item.value === data.hgProductEquipmentLease.leaseStatus)
					}
					this.productTypeIndex = this.productTypeArr.findIndex(item => item.value == this.form.productType)
					
					
					const attrs = JSON.parse(data.product_attr)
					cateProductParam({id: this.form.categoryId}).then(cates => {
						if(cates.result.categoryAttr){
							const allCategory = cates.result.categoryAttr.split(',')
							for (var i = 0; i < allCategory.length; i++) {
								const isExitsAttr = attrs.find(item => item.title === allCategory[i])
								this.productAttr.push({title: allCategory[i], value: isExitsAttr ? isExitsAttr.value : ''});
							}	
						}
					})
				})
			},
			productTypeConfirm(e) {
				this.form.productType = e.value.value
			},
			onchange(e) {
				const value = e.detail.value
				// if(!value.length) return 
				// if(value[value.length - 1].value.split('$')[1]  != 4){
				// 	this.$refs.category.clear()
				// 	return toast('请选择最后一级分类')
				// }
				if(!this.form.categoryId){
					this.productAttr = []
					return 
				}
				
				cateProductParam({id: this.form.categoryId}).then(res => {
					if(res.result.categoryAttr){
						this.productAttr = []
						res.result.categoryAttr.split(',').forEach(item => {
							this.productAttr.push({title: item, value: ''});
						})
					}
				})
			},
			onnodeclick(node) {
				console.log(node);
			},
			rentOutStatusConfirm(e){
				if(this.form.productType === productType.device.value){
					this.form.hgProductEquipmentLease.leaseStatus = e.value.value
					this.form.hgProductMaterialLease.leaseStatus = ''
				}else{
					this.form.hgProductMaterialLease.leaseStatus = e.value.value
					this.form.hgProductEquipmentLease.leaseStatus = ''
				}
				
			},
			factoryDateConfirm(e){
				this.form.hgProductEquipmentLease.factoryDate = this.$moment(e.value).format('YYYY-MM-DD')
				this.showFactoryDate = false
			},
			regionConfirm(e){
				this.form.provinceId = e.value[0].value
				this.form.cityId = e.value[1].value
				this.form.areaId = e.value[2].value
				this.form.province = e.value[0].label
				this.form.city = e.value[1].label
				this.form.area = e.value[2].label
			},
			submit(){
					if(!validate.isNotEmpty(this.form.categoryId, '分类')) return
					// 出租设备
					if(this.form.productType === this.productType.device.value){
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.equipmentBrand, '设备品牌')) return
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.equipmentNo, '设备型号')) return
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.factoryDate, '出厂日期')) return
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.workHours, '工作小时')) return
						if(!validate.isNotZero(this.form.hgProductEquipmentLease.workHours, '工作小时')) return
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.serialNo, '整机序列号')) return
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.monthRent, '月租金')) return
						if(!validate.isNotZero(this.form.hgProductEquipmentLease.monthRent, '月租金')) return
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.classRent, '台班租金')) return
						if(!validate.isNotZero(this.form.hgProductEquipmentLease.classRent, '台班租金')) return
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.hourRent, '小时租金')) return
						if(!validate.isNotZero(this.form.hgProductEquipmentLease.hourRent, '小时租金')) return
						if(!validate.isNotEmpty(this.form.hgProductEquipmentLease.leaseStatus, '设备状态')) return
					}
					// 出租建材
					else {
						if(!validate.isNotEmpty(this.form.hgProductMaterialLease.dayRent, '日租金')) return
						if(!validate.isNotZero(this.form.hgProductMaterialLease.dayRent, '日租金')) return
						if(!validate.isNotEmpty(this.form.hgProductMaterialLease.monthRent, '月租金')) return
						if(!validate.isNotZero(this.form.hgProductMaterialLease.monthRent, '月租金')) return
						if(!validate.isNotEmpty(this.form.hgProductMaterialLease.yearRent, '年租金')) return
						if(!validate.isNotZero(this.form.hgProductMaterialLease.yearRent, '年租金')) return
						if(!validate.isNotEmpty(this.form.hgProductMaterialLease.stock, '数量')) return
						if(!validate.isNotZero(this.form.hgProductMaterialLease.stock, '数量')) return
						if(!validate.isNotEmpty(this.form.hgProductMaterialLease.leaseStatus, '设备状态')) return
					}
					
					if(!validate.isNotEmpty(this.form.productTitle, '商品标题')) return
					for (var i = 0; i < this.productAttr.length; i++) {
						if(!this.productAttr[i].value){
							return toast(this.productAttr[i].title + '不能为空')
						}
					}
					if(!this.productImgList.length){
						return toast('请上传商品图片');
					}
					if(!this.productDetailImgList.length){
						return toast('请上传商品详情图片');
					}
					if(!validate.isNotEmpty(this.form.addressName, '联系人')) return
					if(!validate.isNotEmpty(this.form.addressPhone, '联系方式')) return
					if(!validate.isNotEmpty(this.form.provinceId, '位置信息')) return
					
					this.form.productImg = this.productImgList.join(',')
					this.form.intro = this.productDetailImgList.join(',')
					this.form.productAttr = JSON.stringify(this.productAttr)
					// 租赁商品
					if(this.form.productType === productType.device.value){
						this.form.showPrice = this.form.hgProductEquipmentLease.monthRent
					}
					// 租赁建材
					else{
						this.form.showPrice = this.form.hgProductMaterialLease.monthRent
					}
					this.form.isSku = 2;
					
					if(!this.productId){
						addProduct(this.form).then(res => {
							toast(res.message, true)
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						})
					}else{
						this.form.id = this.productId
						editProduct(this.form).then(res => {
							uni.setStorageSync('refresh', 1)
							toast(res.message, true)
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						})
					}
				}
				
			}
		}
</script>

<style lang="scss">
	::v-deep .input-value-border {
		border: 0 !important;
	}
	
	::v-deep .input-value{
		height: auto !important;
		padding: 0 !important;
		padding-top: 20rpx !important;
		font-size: 31rpx !important;
		color: #333 !important;
	}
	
	::v-deep .uni-data-tree{
		flex:1;
	}
	
	.add-sku{
		width: 231rpx;
		height: 67rpx;
		background: #FFF5F0;
		border-radius: 6rpx;
		border: 1rpx solid $theme-color;
		font-weight: normal;
		font-size: 29rpx;
		color: $theme-color;
	}
	
	.store-unit{
		font-size: 31rpx;
		color: #333333;
		margin-left: 20rpx;
	}
	
	.popup-content{
		width: 577rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 50rpx 35rpx 40rpx;
		box-sizing: border-box;
		
		.title{
			font-size: 33rpx;
			color: #333333;
			font-weight: bold;
		}
		
		.content-text{
			height: 280rpx;
			overflow-y: auto;
			font-weight: normal;
			font-size: 27rpx;
			color: #333333;
			line-height: 38rpx;
			margin: 30rpx 0;
		}
		
		.phone-form{
			padding: 25rpx 0 40rpx;
			
			.form-item{
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #EBEBEB;
				padding: 20rpx 0;
				
				.label{
					padding-right: 40rpx;
					flex-shrink: 0;
				}
				
				.content{
					display: flex;
					align-items: center;
					
					input{
						flex: 1;
						font-size: 29rpx;
					}
				}
			}
		}
	}
	
	.sms-code {
		width: 163rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid $theme-color;
		font-weight: normal;
		font-size: 25rpx;
		color: $theme-color;
		margin-left: 15rpx;
	}
	
	.disabled {
		border: 1rpx solid #d1d1d1;
		color: #d1d1d1;
	}
</style>